<template>
  <div class="app-container">
    <el-card class="box-card">
      <div class="text item">
        产地：{{ pig.breed_place }}
      </div>
      <div class="text item">
        加工厂：{{ pig.enterprise.name }}
      </div>
      <div class="text item">
        出栏日期：{{ pig.out_date }}
      </div>
      <div class="text item">
        重量：{{ pig.weight }}
      </div>
      <div class="text item">
        性状：{{ pig.traits }}
      </div>
      <div class="text item">
        检疫许可证号：{{ pig.check_id }}
      </div>
    </el-card>
    <h2>溯源信息</h2>
    <el-timeline v-loading="loading" style="margin-left:-40px;" :reverse="reverse">
      <el-timeline-item
        v-for="(pork, index) in line"
        :key="index"
        color="#66ccff"
        :timestamp="pork.cut_date"
      >
        <el-card>
          <h4>{{ pork.part_name }}：{{ pork.weight }} kg</h4>
          <p>加工厂商：{{ pork.enterprise.name }}</p>
          <p>加工厂地：{{ pork.enterprise.address }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    <el-button type="primary" style="width:100%;margin-top:15px;" @click="$router.go(-1)">返回</el-button>
  </div>
</template>

<script>
import { tracePork } from '@/api/trace'
import moment from 'moment'

export default {
  data() {
    return {
      reverse: true,
      loading: true,
      pig: {
        breed_place: '',
        enterprise: {
          name: ''
        },
        out_date: '',
        weight: '',
        traits: '',
        check_id: ''
      },
      line: []
    }
  },
  created() {
    this.fetchdata()
  },
  methods: {
    fetchdata() {
      const id = this.$route.query.id
      tracePork(id).then((response) => {
        this.pig = response.obj.pig
        this.pig.out_date = moment(this.pig.out_date).format('YYYY-MM-DD HH:mm:ss')
        this.line = response.obj.porks
        this.line.forEach((x) => { x.cut_date = moment(x.cut_date).format('YYYY-MM-DD HH:mm:ss') })
        this.loading = false
      }).catch(() => {
        this.$message.error('查询失败')
        this.loading = false
      })
    }
  }
}
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
  }
</style>

